<div nz-row>
  <div nz-col [nzLg]="24" [nzMd]="24" [nzOrder]="formOrder" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
    <form nz-form [formGroup]="validateForm" [nzLayout]="'vertical'" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label nzFor="email" nzRequired nzSpan="24">邮箱</nz-form-label>
        <nz-form-control nzErrorTip="请输入邮箱" nzSpan="24">
          <input id="email" formControlName="email" nz-input placeholder="邮箱" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="password" nzSpan="24">昵称</nz-form-label>
        <nz-form-control nzErrorTip="昵称" nzSpan="24">
          <input id="nickName" formControlName="nickName" nz-input placeholder="昵称" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="desc" nzRequired nzSpan="24">个人简介</nz-form-label>
        <nz-form-control nzErrorTip="请输入个人简介" nzSpan="24">
          <textarea id="desc" formControlName="desc" nz-input placeholder="请输入个人简介" rows="4"></textarea>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="password" nzRequired nzSpan="24">国家/地区</nz-form-label>
        <nz-form-control nzErrorTip="昵称" nzSpan="24">
          <nz-select formControlName="area">
            <nz-option nzLabel="中国" nzValue="jack"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="password" nzRequired nzSpan="24">所在省市</nz-form-label>
        <nz-form-control nzErrorTip="昵称" nzSpan="24">
          <div nz-row [nzGutter]="[16, 16]">
            <div nz-col nzSpan="12">
              <nz-select formControlName="province" (ngModelChange)="provinceChange($event)">
                @for (p of provinceData; track p) {
                  <nz-option [nzLabel]="p" [nzValue]="p"></nz-option>
                }
              </nz-select>
            </div>
            <div nz-col nzSpan="12">
              <nz-select formControlName="city">
                @for (c of cityData[selectedProvince]; track c) {
                  <nz-option [nzLabel]="c" [nzValue]="c"></nz-option>
                }
              </nz-select>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="street" nzRequired nzSpan="24">街道地址</nz-form-label>
        <nz-form-control nzErrorTip="街道地址" nzSpan="24">
          <input id="street" formControlName="street" nz-input placeholder="街道地址" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="telephone" nzRequired nzSpan="24">联系电话</nz-form-label>
        <nz-form-control nzSpan="24" [nzErrorTip]="combineTpl">
          <input id="telephone" formControlName="telephone" nz-input placeholder="联系电话" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="mobile" nzRequired nzSpan="24">手机号</nz-form-label>
        <nz-form-control nzSpan="24" [nzErrorTip]="combineTpl">
          <input id="mobile" formControlName="mobile" maxlength="11" nz-input placeholder="手机号" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row>
        <nz-form-control [nzSpan]="14">
          <button nz-button nzType="primary">更新基本信息</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
  <div class="avatar" nz-col [ngClass]="{ 'is-full': formOrder === 1 }" [nzLg]="24" [nzMd]="24" [nzOrder]="avatarOrder" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
    @if (formOrder === 0) {
      <div class="m-b-8">头像</div>
    }
    <div class="avatar-wrap">
      <nz-avatar class="m-b-8" [nzSize]="144" [nzSrc]="'imgs/default_face.png'"></nz-avatar>
      <div class="upload">
        <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzHeaders]="{ authorization: 'authorization-text' }" (nzChange)="handleChange($event)">
          <button nz-button>
            <i nz-icon nzType="upload"></i>
            更换头像
          </button>
        </nz-upload>
      </div>
    </div>
  </div>
</div>
<ng-template #combineTpl let-control>
  @if (control.hasError('message')) {
    {{ control.errors.message }}
  }
  @if (control.hasError('required')) {
    必填项
  }
</ng-template>
